<template>
  <div>
    <el-form ref="form" :model="passwordForm" label-width="80px">
      <el-form-item label="原始密码" prop="oldPassword">
        <el-input v-model="passwordForm.oldPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="passwordForm.newPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item
        label="确认密码"
        prop="confirmPassword"
        :error="getErrorMessage()"
      >
        <el-input
          v-model="passwordForm.confirmPassword"
          type="password"
          @input="checkPasswordMatch"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="changePassword">确认修改</el-button>
        <el-button type="text" @click="forgetPassword">忘记密码</el-button>
      </el-form-item>
    </el-form>
    <ForgotPassword ref="ForgotPassWord"></ForgotPassword>
  </div>
</template>

<script>
import ForgotPassword from "./ForgotPassword.vue";

export default {
  components: { ForgotPassword },
  data() {
    return {
      passwordForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      passwordMismatch: false,
    };
  },
  methods: {
    //修改密码
    async changePassword() {
      // 在这里处理密码修改逻辑
      if (!this.verifyFormat()) {
        return;
      }

      //验证原密码
      if (await this.checkPassWord()) {
        //验证通过，发送请求修改
        this.updatePassword();
      } else {
        //验证不通过
        this.$message({
          message: "原密码不正确，请重新输入",
          type: "error",
        });
      }
    },
    //发送请求，验证原密码
    checkPassWord() {
      return new Promise((resolve, reject) => {
        this.$request.postHttp({
          url: "/user/checkPassWord",
          data: {
            userid: localStorage.getItem("userId"),
            password: this.passwordForm.oldPassword,
          },
          success: (data) => {
            console.log(data);
            resolve(data.isLegal);
          },
          error: (error) => {
            this.$message({
              message: "验证失败，请检查网络或联系管理员",
              type: "error",
            });
            reject(false);
          },
        });
      });
    },
    //发送请求，修改密码
    updatePassword() {
      this.$request.postHttp({
        url: "/user/updateUserByUserId",
        data: {
          userid: localStorage.getItem("userId"),
          password: this.passwordForm.newPassword,
        },
        success: (data) => {
          if (data.isUpdate) {
            this.$message({
              message: "修改成功！",
              type: "success",
            });
            // 清空表单
            this.$refs.form.resetFields();
          }
        },
        error: (error) => {
          this.$message({
            message: "修改失败！",
            type: "error",
          });
        },
      });
    },
    checkPasswordMatch() {
      // 在输入确认密码时检查密码是否匹配
      this.passwordMismatch =
        this.passwordForm.newPassword !== this.passwordForm.confirmPassword;
    },
    getErrorMessage() {
      return this.passwordMismatch ? "新密码和确认密码不一致" : "";
    },
    //验证密码格式
    verifyFormat() {
      if (!this.passwordForm.oldPassword) {
        this.$message.error("未输入原密码");
        return false;
      }
      if (this.passwordForm.oldPassword == this.passwordForm.newPassword) {
        // 新密码和确认密码不同，给予提示
        this.$message.error("您输入的新密码和旧密码相同");
        return false;
      }
      if (this.passwordMismatch) {
        // 新密码和确认密码不同，给予提示
        this.$message.error("新密码和确认密码不一致");
        return false;
      }
      const verifyPassWord = /^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9]{6,15}$/;
      if (!verifyPassWord.test(this.passwordForm.newPassword)) {
        this.$message.error("密码格式有误，密码格式为6-15位的英文数字组合");
        return false;
      }

      return true;
    },
    //忘记密码
    forgetPassword() {
      this.$refs.ForgotPassWord.showForgetPasswordDialog();
    },
  },
};
</script>
